
<template>
  <view class="main">
    <u-sticky>
      <u-navbar title="筛选" :autoBack="true" @leftClick="leftClick" :safeAreaInsetTop="false"></u-navbar>
    </u-sticky>
    <!-- 单选 -->
    <u-cell-group>
      <u-cell v-for="(item,index) in navList" :key="index" @click="navChange(item)">
        <view slot="title" class="image_item">
          <text>{{item.className}}</text>
        </view>
        <view v-show="item.leaf" slot="value" class="u-slot-value" @click="changeAccountPayType(item.className)">
          <radio :class="selectedAccountId == item.className ? 'checked' : ''" :checked="selectedAccountId == item.className" :value="item.className" />
        </view>
      </u-cell>
    </u-cell-group>
    <view class="footer">
      <u-button size="large" text="取消" @click="cancel"></u-button>
      <u-button size="large" type="primary" text="确定" @click="save"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    assetsClass: {
      type: String
    }
  },
  data() {
    return {
      model: {},
      navList: [],
      selectedAccountId: null, // 选中的会员卡ID
      classNo: ''
    }
  },
  mounted() {
    this.GetClassOptionByPid(this.assetsClass)

  },
  methods: {
    // 取值
    changeAccountPayType(accountId) { // 点击其中的一张会员卡
      if (this.selectedAccountId == accountId) { // 如果已经选中，则取消选中
        this.selectedAccountId = null
      } else { // 否则进行选中赋值
        this.selectedAccountId = accountId
      }
    },

    // 资产小类
    GetClassOptionByPid(id) {
      const data = {
        pid: id
      }
      this.$u.api.GetClassOptionByPid(data).then((res) => {
        this.navList = res.data
        this.classNo = res.data[0].classID

      })
    },

    /**
     * 导航栏点击
     */
    navChange(item) {
      if (!item.leaf) {
        this.model.objectID = item.objectID
        this.GetClassOptionByPid(this.model.objectID)
      } else {
        this.selectedAccountId = item.className
      }
    },

    leftClick() {
      this.GetClassOptionByPid(this.assetsClass)
      if (this.assetsClass == this.classNo) {
        this.$emit('onClickCancel')
      }
    },
    // 取消
    cancel() {
      this.$emit('onClickCancel')
    },
    save() {
      this.$emit('onClick', this.selectedAccountId)
    }

  }
}
</script>
<style lang='scss' scoped>
.main {
  height: 100vh;

  .image_item {
    display: flex;
    align-items: center;

    image {
      width: 70upx;
      height: 70upx;
      border-radius: 50%;
    }

    text {
      margin-left: 10px;
    }
  }

  //   .content {
  //     height: 80%;
  //     overflow-y: auto;
  //     margin-top: 50px;

  //     .nav {
  //       margin-top: 1px;
  //       height: 40px;
  //       line-height: 40px;
  //       background: #fff;
  //       padding-left: 10px;
  //       padding-right: 10px;
  //       overflow-x: auto;

  //       &-list {
  //         overflow-x: auto;
  //         white-space: nowrap;
  //       }

  //       &-item {
  //         //padding-left: 5px;
  //         padding-right: 5px;
  //         text-decoration: underline;
  //         color: #387cdf;
  //       }

  //       &-gt {
  //         //margin-left: 5px;
  //       }
  //     }
  //   }

  .footer {
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
